<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋 - 一局定胜负</title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            margin-top: 20px;
            border: 2px solid black;
            background-color: #c99326;
        }

        h2 {
            margin-top: 20px;
        }

        button {
            padding: 10px 20px;
            margin-top: 20px;
        }
    </style>
</head>

<body>

    <h1>五子棋 - 一局定胜负</h1>
    <canvas id="chessBoard" width="600" height="600"></canvas>
    <h2 id="status">当前轮到：黑棋</h2>
    <button onclick="resetGame()">重置游戏</button>

    <script>
        const canvas = document.getElementById('chessBoard');
        const ctx = canvas.getContext('2d');
        const gridSize = 40; // 棋盘每个格子的大小
        const rows = 15; // 棋盘行数
        const cols = 15; // 棋盘列数
        let board = Array(rows).fill(null).map(() => Array(cols).fill(0)); // 初始化棋盘（0：无棋子，1：黑棋，2：白棋）
        let currentPlayer = 1; // 当前玩家（1：黑棋，2：白棋）
        let gameOver = false;

        // 绘制棋盘
        function drawBoard() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
            for (let i = 0; i < rows; i++) {
                for (let j = 0; j < cols; j++) {
                    ctx.beginPath();
                    // 绘制横线
                    ctx.moveTo(gridSize / 2, gridSize * i + gridSize / 2);
                    ctx.lineTo(gridSize * (rows - 1) + gridSize / 2, gridSize * i + gridSize / 2);
                    ctx.stroke();

                    // 绘制竖线
                    ctx.moveTo(gridSize * j + gridSize / 2, gridSize / 2);
                    ctx.lineTo(gridSize * j + gridSize / 2, gridSize * (cols - 1) + gridSize / 2);
                    ctx.stroke();
                }
            }
        }

        // 绘制棋子
        function drawPiece(x, y, player) {
            const centerX = gridSize * x + gridSize / 2;
            const centerY = gridSize * y + gridSize / 2;
            const radius = gridSize / 2.5;

            // 绘制立体感
            const gradient = ctx.createRadialGradient(centerX - 5, centerY - 5, radius - 10, centerX, centerY, radius);
            if (player === 1) { // 黑棋
                gradient.addColorStop(0, '#000');
                gradient.addColorStop(1, '#666');
            } else { // 白棋
                gradient.addColorStop(0, '#fff');
                gradient.addColorStop(1, '#ddd');
            }

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fillStyle = gradient;
            ctx.fill();

            // 棋子边缘绘制
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        // 点击棋盘下棋
        canvas.addEventListener('click', (e) => {
            if (gameOver) return;

            const rect = canvas.getBoundingClientRect();
            const x = Math.floor((e.clientX - rect.left) / gridSize);
            const y = Math.floor((e.clientY - rect.top) / gridSize);

            if (board[y][x] === 0) {
                // 下棋
                board[y][x] = currentPlayer;
                drawPiece(x, y, currentPlayer);

                // 检查胜负
                if (checkWin(x, y)) {
                    document.getElementById('status').innerText = `${currentPlayer === 1 ? '黑棋' : '白棋'}胜利！`;
                    gameOver = true;
                    return;
                }

                // 切换玩家
                currentPlayer = 3 - currentPlayer; // 切换玩家（1 变 2，2 变 1）
                document.getElementById('status').innerText = `当前轮到：${currentPlayer === 1 ? '黑棋' : '白棋'}`;
            }
        });

        // 检查当前落子是否胜利
        function checkWin(x, y) {
            const directions = [
                { dx: 1, dy: 0 },  // 横向
                { dx: 0, dy: 1 },  // 纵向
                { dx: 1, dy: 1 },  // 右下斜向
                { dx: 1, dy: -1 }  // 左下斜向
            ];

            for (const { dx, dy } of directions) {
                let count = 1;

                // 检查正方向
                for (let i = 1; i < 5; i++) {
                    const nx = x + dx * i;
                    const ny = y + dy * i;
                    if (nx >= 0 && nx < cols && ny >= 0 && ny < rows && board[ny][nx] === currentPlayer) {
                        count++;
                    } else {
                        break;
                    }
                }

                // 检查反方向
                for (let i = 1; i < 5; i++) {
                    const nx = x - dx * i;
                    const ny = y - dy * i;
                    if (nx >= 0 && nx < cols && ny >= 0 && ny < rows && board[ny][nx] === currentPlayer) {
                        count++;
                    } else {
                        break;
                    }
                }

                // 判断是否五子连珠
                if (count >= 5) {
                    return true;
                }
            }

            return false;
        }

        // 重置游戏
        function resetGame() {
            board = Array(rows).fill(null).map(() => Array(cols).fill(0)); // 清空棋盘
            currentPlayer = 1; // 重置为黑棋先行
            gameOver = false;
            document.getElementById('status').innerText = `当前轮到：黑棋`;
            drawBoard(); // 重新绘制棋盘
        }

        // 初始化棋盘
        drawBoard();
    </script>

</body>

</html>